<template>
    <div class="check-ticket center">
        <qrcode-vue :value="url" level="H" :size="300" foreground="#409eff" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps, watch, onMounted, onBeforeUnmount } from 'vue'
import QrcodeVue from 'qrcode.vue'
import { useRouter } from 'vue-router'
import { computed } from '@vue/reactivity';
import { getTicketStatus } from '../../../api/ticket'
import { ElMessage } from 'element-plus';

let timer: any = null
const router = useRouter()
const ticketId = router.currentRoute.value.query.ticketId


const url = computed(() => {
    return 'http://4wbq7v.natappfree.cc/tickets/checkTicket/' + ticketId
})

onMounted(() => {
    getTicketStatusApi()
    timer = setInterval(getTicketStatusApi, 1000)
})

const getTicketStatusApi = () => {
    getTicketStatus({ ticketId: ticketId }).then((res: any) => {
        if (res.code == 200) {
            debugger
            if (res.data.checkStatus == 1) {
                router.push({
                    path: '/rate',
                    query: {
                        movieId: res.data.movieId
                    }
                })
            }

        } else if (res.code == 500) {
            router.push({
                path: '/',
                // query: {
                //     movieId: res.data
                // }
            })
            ElMessage.error(res.msg)
        }
    })
}

onBeforeUnmount(() => {
    clearInterval(timer)
    timer = null;
})

</script>
<style lang='scss' scoped>
.check-ticket {
    width: 100%;
    height: 100%;
}
</style> 